<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    
    <title>Web AuthN Registration View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>

    <script type="text/javascript" th:src="@{#{webjars.text-encoding.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.text-encoding-indexes.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.whatwg-fetch.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.base64.js}}"></script>

    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        let appId = /*[[${webauthnApplicationId}]]*/;
        /*]]>*/
    </script>
    <script th:src="@{/js/webauthn/webauthn.js}"></script>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" id="login">

        <div style="display: none" id="diagnostics">
            <p>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#serverResponse" aria-expanded="false" aria-controls="serverResponse">
                    Server Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#authenticatorResponse" aria-expanded="false" aria-controls="authenticatorResponse">
                    Authenticator Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#requestPanel" aria-expanded="false" aria-controls="requestPanel">
                    Request
                </button>
            </p>
            <div class="collapse" id="serverResponse">
                <div class="card card-body">
                    <h4>Server Response:</h4>
                    <pre id="session"></pre>
                    <pre id="server-response"></pre>
                </div>
            </div>
            <div class="collapse" id="authenticatorResponse">
                <div class="card card-body">
                    <h4>Authenticator Response:</h4>
                    <pre id="authenticator-response"></pre>
                </div>
            </div>
            <div class="collapse" id="requestPanel">
                <div class="card card-body">
                    <h4>WebAuthN Request:</h4>
                    <pre id="request"></pre>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center flex-column align-items-center">
            <h2 id="status" th:utext="#{cas.mfa.registerdevice.label.title}">Register Device</h2>
            <div id="messages">
                <p th:utext="#{cas.mfa.webauthn.register.helptext}"></p>
            </div>
            <div id="device-info">
                <div class="d-flex justify-content-center flex-column align-items-center">
                    <br>
                    <img id="device-icon"/>
                    <br>
                    <span id="device-name"></span>
                </div>
                <br>
                <p th:utext="#{cas.mfa.webauthn.register.wait}"></p>
            </div>
            <div>
                <section id="deviceNamePanel" class="cas-field form-group my-3 mdc-input-group">
                    <div class="mdc-input-group-field mdc-input-group-field-append">
                        <br>
                        <div class="d-flex">
                            <label for="credentialNickname" class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                                <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label" th:utext="#{screen.authentication.webauthn.name}">Nickname</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                                <input class="mdc-text-field__input form-control"
                                       type="text"
                                       name="credentialNickname"
                                       id="credentialNickname"
                                       size="50"
                                       autocomplete="off" required />
                            </label>
                        </div>
                    </div>
                </section>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        name="registerButton" id="registerButton" accesskey="r" type="button">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.register}">Register Device</span>
                </button>

                <input type="hidden" id="registerCsrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

                <section id="residentKeysPanel" class="cas-field my-3 mdc-input-group">
                    <p th:utext="#{cas.mfa.webauthn.register.discoverablecredentials}"></p>
                </section>
                <button class="mdc-button mdc-button--raised me-2"
                        name="registerDiscoverableCredentialButton"
                        id="registerDiscoverableCredentialButton" accesskey="d" type="button">
                        <span class="mdc-button__label"
                              th:text="#{screen.welcome.button.register-residentkey}">Register Device with Discoverable Credentials</span>
                </button>

                <!--
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        id="logoutButton" disabled="disabled" name="logout"
                        accesskey="l" type="button" onclick="javascript:logout();">
                <span class="mdc-button__label"
                      th:text="#{screen.welcome.button.logout}">Logout</span>
                </button>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        id="deregisterButton" name="deregister"
                        accesskey="d" type="button" onclick="javascript:deregister();">
                <span class="mdc-button__label"
                      th:text="#{screen.welcome.button.deregister}">Deregister</span>
                </button>
                -->
            </div>


        </div>

        <form method="POST" class="fm-v clearfix" id="form" th:action="@{/login}">
            <input type="hidden" name="_eventId" value="submit"/>
            <input type="hidden" id="sessionToken" name="sessionToken" />
            <input type="hidden" name="geolocation"/>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
        </form>

        <script type="text/javascript">
            const csrfToken = $('#registerCsrfToken').val();

            document.getElementById("credentialNickname").value = randomWord();
            let btn = document.getElementById('registerButton');
            btn.addEventListener('click', event => {
                const username = '[[${principal.id}]]';
                const displayName = '[[${displayName}]]';
                const credentialNickname = $('#credentialNickname').val();
                register(username, displayName, credentialNickname, csrfToken);
            }, false);

            let btnResident = document.getElementById('registerDiscoverableCredentialButton');
            btnResident.addEventListener('click', event => {
                const username = '[[${principal.id}]]';
                const displayName = '[[${displayName}]]';
                const credentialNickname = $('#credentialNickname').val();
                register(username, displayName, credentialNickname, csrfToken, true);
            }, false);

        </script>

    </div>
</main>
</body>
</html>
